<?php include 'inc/teacher_head.php';?>



<div class="layui-container">


    <div class='layui-row' style='text-align:center;'>
        <div id='pageTop'>
            <div class="layui-inline title1">
                <?=$this->title;?>&nbsp; &nbsp; &nbsp;&nbsp;
            </div>

             &nbsp; &nbsp; 后台显示的分类尽量只显示1-2个，可以避免设定时选择困难
             <span class="layui-badge-dot"></span>&nbsp; &nbsp;
             <a class="layui-btn b1" href='#' id='addCat'>新增课程分类</a>
        </div>
    </div>

    <div class='layui-row' style="">
        <div style="margin:15px auto;width:800px;">
            <table id="catsTable" lay-filter='catsTable'></table>
        </div>

    </div>

</div><!--container end-->

<!-- 选中的分类 -->
<input type="hidden" name="selCat" id="selCat">



<script type="text/html" id="tplCat">
    <div>
        <a href='#' lay-event='view' class='layui-btn layui-btn-sm b1'>打开分类</a>
        <!-- <a href='#' lay-event='add' class='layui-btn layui-btn-sm'>新增课程</a> -->
        <a href='#' lay-event='del' class='layui-btn layui-btn-sm layui-btn-danger'>删除分类</a>
    </div>
</script>

<script type="text/html" id="tplTask">
    <div>
        <a href='/student/downTask?taskID={{d.id}}' lay-event='downTask' class='layui-btn layui-btn-sm b1'>下载</a>
        <a href='#' lay-event='delTask' class='layui-btn layui-btn-sm layui-btn-danger'>删除</a>
    </div>
</script>

<script id="tplShow" type="text/html">
    <input type="checkbox" lay-filter="showhide" lay-skin="switch" name='teaching'
        lay-text="显示|隐藏" {{d.teaching==='1'?'checked':null}} value="{{d.id}}">
</script>




<?php include 'inc/teacher_foot.php';?>

<script type="text/javascript">
layui.use(['form','element', 'upload','table'], function () {
    var table = layui.table,
        form = layui.form,
        upload=layui.upload,
        $ = layui.$;


$("#nav_task").addClass('layui-this'); //设置导航当前选中项的样式



//分类表格
table.render({
    elem: '#catsTable'
    ,id:'catsTable'
    ,url: '/teacher/getCats'
    ,width:800
    ,even:true
    ,size:'lg'
    ,page: false
    ,cols: [[
        {type: 'numbers',title:'序号',width:60,align:'center'},
        {field: 'id', title: '分类ID',width:80},
        {field: 'name', title: '分类名称（单击修改）', sort: true,edit:'text'},
        {templet:'#tplShow', width:120, title: '<a href="#" id="t1">后台显示?</a>',align:'center'},
        {templet: '#tplCat', title: '操作列', width: 300,align:'center'},
    ]]
    ,done:function(){
        $("#t1").click(function(){
            layer.tips('后台显示的分类会在<font size=3 color=red>上课</font>设置页中显示', '#t1',{tips:1,area:'280px',time:5000});
        });


    }
});

//课程表格
table.render({
    elem: '#tasksTable'
    ,id: 'tasksTable'
    ,url: '/teacher/getTasks'
    // ,height: 500
    ,width:600
    ,even:true
    ,size:'lg'
    ,page: false
    ,cols: [[
            {type: 'numbers',title:'序号',width:80,align:'center'},
            {field: 'id', title: '课程ID',width:100},
            {field: 'name',edit:'text', title: '课程名称（单击修改）',align:'left'},
            {templet: '#tplTask', title: '操作列', width: 150,align:'center'},
    ]]
});


// 绑定上传组件到  #up 上
let loading;
let upInt = upload.render({
                elem: '#up',
                url: '/teacher/addTasks',
                multiple: true, //多文件上传支持
                number: 0, //上传文件数量,0为不限制
                size: 0, //限制文件大小,0为不限制
                accept: 'file', //普通文件
            before: function () { //上传前触发
                loading = layer.load(); //显示上传loading
                let catid=$('#selCat').val();
                this.data = {'id':catid}; //传递参数catid
            }
            ,allDone: function () { //当文件全部上传后，才触发
                layer.close(loading);
                layer.msg('新增成功!');
                // console.log('上传1');
                table.reload('tasksTable');
            }
});


//分类表工具条事件
table.on('tool(catsTable)',function(obj){
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    //删除分类按钮
    if (layEvent==='del'){
        layer.confirm('将同时删除此分类下所有课程,真的要删除该分类吗？', {icon:3,title:'危险操作!!!'}, function (index) {
            $.post('/teacher/delCat',{id:data.id},function(res){
                layer.close(index);
                layer.msg('删除成功!');
                obj.del();
            });
        });
    }
    //上传课程到此分类
    // if (layEvent==='add'){
    //     upInt.reload({
    //         before: function () { //上传前触发
    //             loading = layer.load(); //显示上传loading
    //             this.data = {'id':obj.data.id}; //传递参数catid
    //         }
    //         ,allDone: function () { //当文件全部上传后，才触发
    //             layer.close(loading);
    //             layer.msg('新增成功!');
    //             // console.log('上传2');
    //             table.reload('tasksTable');//tasksTable
    //         }
    //     });
    //     $('#up').click();//触发上传
    // }
    //查看分类下课程
    if (layEvent==='view'){
        $('#currentCatName').html(obj.data.name);
        $('#selCat').val(obj.data.id);

        table.reload('tasksTable',{where:{category_id:obj.data.id}});
        layer.open({
            type:1
            ,title: '课程管理'
            ,content:$('#tasksDIV')
            ,area: ['700px', '550px']
        });
    }

});


table.on('tool(tasksTable)',function(obj){
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
    //删除分类
    if (layEvent==='delTask'){
        layer.confirm('真的删除该课程吗？', {icon:3}, function (index) {
            $.post('/teacher/delTask', {
                id:obj.data.id,
                catid:obj.data.category_id
            }, function (data) {
                if (data === '成功') {
                    obj.del();
                    layer.msg('删除成功!');
                } else {
                    layer.alert('删除失败');
                }
            });
            layer.close(index);
        });
    }
});


// 修改分类名称
table.on('edit(catsTable)', function(obj){
  // console.log(obj.value); //得到修改后的值
  // console.log(obj.field); //当前编辑的字段名
  // console.log(obj.data); //所在行的所有相关数据
    $.post('/teacher/edtCat',{id:obj.data.id,newName:obj.value},function(res){
        table.reload('catsTable');
        layer.msg(res);
    });
});

// 修改课程名称
table.on('edit(tasksTable)', function(obj){
    let data=obj.data;
    $.post('/teacher/edtTask',{id:data.id,newName:obj.value,catID:data.category_id},function(res){
        table.reload('tasksTable');
        layer.msg(res);
    });
});


// 后台显示或隐藏分类
form.on('switch(showhide)', function(data){
    $.post('/teacher/showhide',{id:data.value,status:data.elem.checked},function(res){
        if(res!='ok'){
            layer.alert(res);
            table.reload('catsTable');
        }
    });
});

// 新增分类
$('#addCat').click(function(){
    layer.prompt({
      title: '请输入分类名',
    }, function(value, index, elem){
      if(value.trim()!==''){
        $.post('/teacher/addCat',{name:value.trim()},function(res){
            if(res=='新增成功'){
                table.reload('catsTable');//重载catsTable
                layer.msg(res);
                layer.close(index);//关闭弹出层
            }else{
                layer.alert(res);
            }
        });
      }else{
        layer.alert('名称不可为空！');
      }
    });
});


// ESC键 关闭所有弹出层
$(document).keydown(function(event){
    switch(event.keyCode){
         case 27:
            layer.closeAll();
    }
});


}); // end
</script>

<div id='tasksDIV' style="display: none;padding-top: 20px;" align="center">
    <h2>
        当前分类为：<span id='currentCatName' style="color:red"></span>
        &nbsp; <button id='up' class="layui-btn b1">新 增 课 程</button>
    </h2>
    <br>
    <table id="tasksTable" lay-filter='tasksTable'></table>
</div>